<template>
  <div class="slider" ref="slider">
    <div class="slider-group" ref="sliderGroup">
      <slot></slot>
    </div>

    <div class="dots">
      <span class="dot" 
        v-for="(item,index) of dots" 
        :key='index'
        :class='{active:currentDot===index}' ></span>
    </div>
</div>
</template>

<script type="text/ecmascript-6">
import BScroll from 'better-scroll'

//类名添加方法
import {addClass} from 'common/js/dom'

  export default {
    name: 'slider',
    data() {
      return {
        dots:[],
        currentDot:0
      }
    },
    props:{
      loop:{
        type:Boolean,
        default:true
      },
      autoPlay:{
        type:Boolean,
        default:true
      },
      interval:{
        type:Number, 
        default:3000
      }
    },
    mounted(){
      setTimeout(() => {
        this.setSliderWidth()
        this.initdots()
        this.initSlider()
        if(this.autoPlay){
          this.Play();
        }
      }, 20);

      //窗口发生改变时 resize 方法，重新计算width
      window.addEventListener('resize',()=>{
        //slider未初始化时return
        if(!this.slider){
          return
        }
        this.setSliderWidth(true);
        this.slider.refresh()//重新计算
      })
    },
    destroyed(){
      clearTimeout(this.timer)
    },
    methods: { 
      //初始化 slider 宽度
      setSliderWidth(isResize){
        // 获取轮播图片的 dom数组
        this.children=this.$refs.sliderGroup.children

        // 初始化宽度
        let width=0  
        
        let sliderWidth=this.$refs.slider.clientWidth

        for(let i=0; i< this.children.length ;i++){
            let child= this.children[i]
            //动态添加 class 样式
            addClass(child,'slider-item')
            
            child.style.width=sliderWidth +'px'
            //全部图片宽度
            width+=sliderWidth
        }
          //两边滚动 width + 2张
          if(this.loop&&!isResize){
            width+=2*sliderWidth
          }
          this.$refs.sliderGroup.style.width=width +'px'
      },
      initdots(){
        this.dots=new Array(this.children.length)
      },
      initSlider(){
          this.slider=new BScroll(this.$refs.slider,{
            scrollX:true,
            scrollY:false,
            momentum:false,
            snap:true,
            snapLoop:this.loop,
            snapThreshold:0.3,
            snapSpeed: 400
           
        }) 
          this.slider.on('scrollEnd',()=>{
            // 当前滚动的 图片索引
            let CurrentIndex=this.slider.getCurrentPage().pageX
            // 循环滚动 
            if(this.loop){
                CurrentIndex-=1
            }
            this.currentDot=CurrentIndex

            if(this.timer){
              clearTimeout(this.timer)
              this.Play()
            }
          })
      },
      Play(){
        let pageIndex=this.currentDot+1;
        if(this.loop){
          pageIndex++
        }
        this.timer=setTimeout(()=>{
            this.slider.goToPage(pageIndex,0,400)
        },this.interval) 
      }
    }
  }

</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
  @import "~common/stylus/variable"
  
  .slider
    min-height: 1px
    .slider-group
      position: relative
      overflow: hidden
      white-space: nowrap
      .slider-item
        float: left
        box-sizing: border-box
        overflow: hidden
        text-align: center
        a
          display: block
          width: 100%
          overflow: hidden
          text-decoration: none
        img
          display: block
          width: 100%
    .dots
      position: absolute
      right: 0
      left: 0
      bottom: 12px
      text-align: center
      font-size: 0
      .dot
        display: inline-block
        margin: 0 4px
        width: 8px
        height: 8px
        border-radius: 50%
        background: $color-text-l
        &.active
          width: 20px
          border-radius: 5px
          background: $color-text-ll
</style>